<template>
    <div id="app">
        <h2>测试题</h2>
        <SubjectItem v-for="(item, index) in 5" :key="index" :index="index" @submit="submit">
        </SubjectItem>
        <div>
            <FlagItem v-for="(item, index) in isResult" :key="index" :result="item" :flag="index">
            </FlagItem>
        </div>
    </div>
</template>

<script>
import SubjectItem from './SubjectItem'
import FlagItem from './FlagItem'
export default {
    name: 'MainSubject',
    components: {
        SubjectItem,
        FlagItem
    },
    data() {
        return {
            isResult: [null, null, null, null, null]
        }
    },
    methods: {
        submit(val) {
            this.isResult[val.index] = val.isRight
            this.isResult = this.isResult.filter(item => item === item)
        }
    }
};
</script>

<style scoped>
body {
    background-color: #eee;
}

#app {
    background-color: #fff;
    width: 500px;
    margin: 50px auto;
    box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.5);
    padding: 2em;
}
</style>